<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡</title>
    <style>
        #one {
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }

        #two {
            width: 150px;
            height: 150px;
            background-color: orangered;
        }

        #three {
            width: 100px;
            height: 100px;
            background-color: royalblue;
        }

        #four {
            width: 50px;
            height: 50px;
            background-color: darkolivegreen;
        }
    </style>
</head>

<body>
    <!-- 
        1.冒泡

        冒泡是从下向上，DOM元素绑定的事件被触发时，此时该元素为目标元素，
        目标元素执行后，它的的祖元素绑定的事件会向上顺序执行。如下代码所示，四个嵌套的div：

        addEventListener函数的第三个参数设置为false说明不为捕获事件，即为冒泡事件。
     -->
    <div id='one'>1
        <div id='two'>2
            <div id='three'>3
                <div id='four'>4
                </div>
            </div>
        </div>
    </div>

    <script type='text/javascript'>
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');
        var four = document.getElementById('four');
        one.addEventListener('click', function () {
            alert('one');
        }, false);
        two.addEventListener('click', function () {
            alert('two');
        }, false);
        three.addEventListener('click', function () {
            alert('three');
        }, false);
        four.addEventListener('click', function () {
            alert('four');
        }, false);
    </script>
</body>

</html>